<script setup>
import {ref, defineEmits} from 'vue'
import SvgIcon from "@/components/SvgIcon/index.vue";
import {completeOrder} from "@/api/mobile/order.js";
import {ElNotification} from 'element-plus'

const {proxy} = getCurrentInstance();
const emit = defineEmits(['refresh'])

const props = defineProps({
  itemValue: {
    type: Object,
    required: true
  }
})
const order = ref(props.itemValue)
const handleClick = async () => {
  ElNotification({
    title: '维修单',
    message: order.value.staffName + "同学正在维修 “" + order.value.name + "” 的设备中！",
    type: 'info',
  })
}
</script>

<template>
  <div class="task-item" @click="handleClick">
    <div class="task-nei">
      <!-- 上方：时间 / 编号 -->
      <div class="item-head-flex">
        <div class="time-id">
          <SvgIcon icon-class="time" class="icon"/>
          {{ itemValue.createTime }} / 编号: {{ itemValue.id }}
        </div>
      </div>

      <!-- 中间：建筑/宿舍 + 姓名 -->
      <div class="item-body-flex">
        <div class="location" :class="{ highlight: itemValue.identity !== 0 }">
          <SvgIcon icon-class="school" class="icon"/>
          {{ itemValue.building }}#{{ itemValue.dormitory }}
        </div>
        <div class="name" :class="{ highlight: itemValue.identity !== 0 }">
          <SvgIcon icon-class="user" class="icon"/>
          {{ itemValue.name }}
        </div>
        <div class="status-container">
          维修中
          <svg-icon icon-class="hourglass-full"/>
        </div>
      </div>

      <el-divider border-style="dashed" style="margin: 0"/>

      <!-- 底部：任务详情 -->
      <p class="item-footer">{{ itemValue.details }}</p>
    </div>
  </div>
</template>

<style scoped lang="scss">
.task-item {
  background-color: #fff;
  margin: 8px auto;
  width: 96%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  &:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }

  .task-nei {
    width: 90%;
    margin: 0 auto;
    padding: 10px 12px;

    .item-head-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 11px;
      line-height: 11px;
      color: #8c92a0;

      .time-id {
        display: flex;
        align-items: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        .icon {
          margin-right: 4px;
        }
      }
    }

    .item-body-flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      line-height: 14px;
      margin: 6px 0;

      .location,
      .name {
        display: flex;
        align-items: center;
        font-weight: bold;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .icon {
          margin-right: 4px;
        }
      }

      .location {
        color: var(--color-role-student);
        flex: 1;

        &.highlight {
          color: var(--color-role-teacher);
        }
      }

      .name {
        color: var(--color-role-student);
        text-align: center;
        flex: 1;
        margin: 0 12px;

        &.highlight {
          color: var(--color-role-teacher);
        }
      }

      .status-container {
        color: var(--color-status-working);
      }
    }


    .item-footer {
      font-size: 14px;
      color: #444;
      text-align: center;
      line-height: 1.4;
      word-break: break-word;
      margin: 6px 0 0;
    }
  }
}
</style>
